<template>
	<view class="background">
		<!-- <view class="navBig">
			<view :class="{ active: isActive1 }" @tap="all" style="margin-left: 5%;float: left;">全部</view>
			<view :class="{ active: isActive2 }" @tap="beEvaluated" style="margin-right: 5%;float: right;">订单评价</view>
		</view>
		<view class="navSmall">
			<view :class="{ active: isActive4 }" @tap="alone" style="border-right: 1rpx solid #EFEFF4;">个人订单</view>
			<view :class="{ active: isActive5 }" @tap="charter">包车订单</view>
		</view> -->
		<view v-if="All" class="orderWarp">
			<!-- <view @click="toDetail(item)" v-for="(item,index) in orderList" :key="index" :style="{border:index+1===orderList.length?'none':''}">
				<view class="dian dian1"></view>
				<text class="time">{{item.fromTime}}乘车</text>
				<view class="dian dian2"></view>
				<text class="site">{{item.fromCity}} --- {{item.endCity}}</text>
				<text class="state state1">{{ checkState(item.orderState) }}</text>
				<text class="money">￥{{item.totalAmount}}</text> 
				<view v-if="item.orderState==1" class="code refund" hover-class="btnHover" @tap="payOrder(item.scheduleDetailId)">支付</view>
				<view v-else class="code refund" hover-class="btnHover" @tap="refund(item.billId,item.leaveTime)">退票</view>
				<view @tap="toCode" class="code" hover-class="btnHover">乘车码</view>
			</view> -->
			<view @click="toDetail(item)" v-for="(item,index) in orderList" :key="index" >
				<view>
					<text class="time">{{item.fromTime}}乘车</text>
					<text class="state state1">{{ checkState(item.orderState) }}</text>
				</view>
				<view>
					<text class="site">{{item.fromCity}} --- {{item.endCity}}</text>
					<text class="money">￥{{item.totalAmount}}</text> 
				</view>
				<view>
					<button v-if="item.orderState == 1" size="mini">取消订单</button>
				</view>
			</view>
		</view>
		<view v-else class="orderWarp">
			<view v-for="(item,index) in scoreList" :key="index">
				<view class="dian dian1"></view>
				<text class="time">{{item.leaveTime}}乘车</text>
				<view class="dian dian2"></view>
				<text class="site">{{item.startStation}}--- {{item.endStation}}</text>
				<text
					class="state state1">{{item.billState===0?'待支付':(item.billState===1?'待乘车':(item.billState===2?'乘车中':(item.billState===3?'待评价':(item.billState===4?'已完成':''))))}}</text>
				<text class="money">￥{{item.factualAmount}}.00</text>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.serviceScore===0||item.serviceScore===null">
					<image @tap="score(1)" class="xing1" src="@/static/kong.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/kong.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/kong.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/kong.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/kong.png"></image>
					<view class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.pingfen===1">
					<image @tap="score(1)" class="xing1" src="@/static/shi.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/kong.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/kong.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/kong.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/kong.png"></image>
					<view @tap="get(index)" class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.pingfen===2">
					<image @tap="score(1)" class="xing1" src="@/static/shi.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/shi.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/kong.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/kong.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/kong.png"></image>
					<view @tap="get(index)" class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.pingfen===3">
					<image @tap="score(1)" class="xing1" src="@/static/shi.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/shi.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/shi.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/kong.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/kong.png"></image>
					<view @tap="get(index)" class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.pingfen===4">
					<image @tap="score(1)" class="xing1" src="@/static/shi.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/shi.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/shi.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/shi.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/kong.png"></image>
					<view @tap="get(index)" class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" @tap="toScore(item.billId,index)" v-if="item.pingfen===5">
					<image @tap="score(1)" class="xing1" src="@/static/shi.png"></image>
					<image @tap="score(2)" class="xing2" src="@/static/shi.png"></image>
					<image @tap="score(3)" class="xing3" src="@/static/shi.png"></image>
					<image @tap="score(4)" class="xing4" src="@/static/shi.png"></image>
					<image @tap="score(5)" class="xing5" src="@/static/shi.png"></image>
					<view @tap="get(index)" class="get" hover-class="btnHover">评分提交</view>
				</view>
				<view class="fen" v-if="item.serviceScore===1">
					<image class="xing1" src="@/static/shi.png"></image>
					<image class="xing2" src="@/static/kong.png"></image>
					<image class="xing3" src="@/static/kong.png"></image>
					<image class="xing4" src="@/static/kong.png"></image>
					<image class="xing5" src="@/static/kong.png"></image>
				</view>
				<view class="fen" v-if="item.serviceScore===2">
					<image class="xing1" src="@/static/shi.png"></image>
					<image class="xing2" src="@/static/shi.png"></image>
					<image class="xing3" src="@/static/kong.png"></image>
					<image class="xing4" src="@/static/kong.png"></image>
					<image class="xing5" src="@/static/kong.png"></image>
				</view>
				<view class="fen" v-if="item.serviceScore===3">
					<image class="xing1" src="@/static/shi.png"></image>
					<image class="xing2" src="@/static/shi.png"></image>
					<image class="xing3" src="@/static/shi.png"></image>
					<image class="xing4" src="@/static/kong.png"></image>
					<image class="xing5" src="@/static/kong.png"></image>
				</view>
				<view class="fen" v-if="item.serviceScore===4">
					<image class="xing1" src="@/static/shi.png"></image>
					<image class="xing2" src="@/static/shi.png"></image>
					<image class="xing3" src="@/static/shi.png"></image>
					<image class="xing4" src="@/static/shi.png"></image>
					<image class="xing5" src="@/static/kong.png"></image>
				</view>
				<view class="fen" v-if="item.serviceScore===5">
					<image class="xing1" src="@/static/shi.png"></image>
					<image class="xing2" src="@/static/shi.png"></image>
					<image class="xing3" src="@/static/shi.png"></image>
					<image class="xing4" src="@/static/shi.png"></image>
					<image class="xing5" src="@/static/shi.png"></image>
				</view>
				<view @tap="toCode" class="code" hover-class="btnHover">乘车码</view>
			</view>
		</view>
		<view class="codeWarp" v-if="code">
			<image src="@/static/code.png"></image>
			<button @tap="come">返回</button>
		</view>
	</view>
</template>

<script>
	var openid;
	import api from '../../api';
	export default {
		data() {
			return {
				All: true,
				isActive1: true,
				isActive2: false,
				isActive4: true,
				isActive5: false,
				orderList: [],
				scoreList: [],
				billId: '',
				code: false,
				fenId: '',
				fenNum: '',
				fen: '',
			}
		},
		onLoad() {
			this.getOrderList()
			return
			// 获取openid
			try {
				const value = uni.getStorageSync('openid');
				if (value) {
					openid = value;
				}
			} catch (e) {
				// error
			}
			uni.request({
				url: 'https://dycts.guojutech.net/api/bill/getUserBillByOpenId',
				data: {
					openId: openid
				},
				success: (e) => {
					this.orderList = e.data.list
				}
			});
			uni.request({
				url: 'https://dycts.guojutech.net/api/bill/getBillByServiceEvaluation',
				data: {
					openId: openid
				},
				success: (e) => {
					var tmp = {};
					for (var i in e.data.list) {
						tmp = e.data.list[i]
						tmp['pingfen'] = "0"
						this.scoreList.push(tmp)
					}
				}
			});

		},
		methods: {
			toDetail(item){
				console.log(item);
				uni.navigateTo({
					url:'/pages/order/order-detail?item='+JSON.stringify(item)
				})
			},
			checkState(state){
				if(state==1){
					return '待支付'
				}else if(state == 2){
					return '已支付'
				}else if(state == 5){
					return '待出行'
				}else if(state == 6){
					return '已出行'
				}else if(state == 7){
					return '已取消'
				}else if(state == 9){
					return '退款中'
				}else if(state == 10){
					return '退款成功'
				}else if(state == 11){
					return '取消退款'
				}
			},
			getOrderList(){
				api.order.queryByOrderState({state:'',type:''}).then(res=>{
					if(res.code ==200){
						this.orderList = res.data
					}
				})
			},
			// 全部订单数据
			theAll() {
				uni.request({
					url: 'https://dycts.guojutech.net/api/bill/getUserBillByOpenId',
					data: {
						openId: openid
					},
					success: (e) => {
						this.orderList = e.data.list
					}
				});
			},

			// 评价订单数据
			score() {
				uni.request({
					url: 'https://dycts.guojutech.net/api/bill/getBillByServiceEvaluation',
					data: {
						openId: openid
					},
					success: (e) => {
						var tmp = {};
						for (var i in e.data.list) {
							tmp = e.data.list[i]
							tmp['pingfen'] = "0"
							this.scoreList.push(tmp)
						}
					}
				});
			},

			// 全部,待评价切换
			all() {
				this.isActive1 = true
				this.isActive2 = false
				this.All = true
			},
			beEvaluated() {
				this.isActive1 = false
				this.isActive2 = true
				this.All = false
			},
			// 个人订单,包车订单切换
			alone() {
				this.isActive4 = true
				this.isActive5 = false
			},
			charter() {
				this.isActive4 = false
				this.isActive5 = true
			},
			// 退票
			refund(billId,leaveTime) {
				var times=(new Date(leaveTime).getTime()-new Date().getTime())/1000/60
				if(times<60){
					uni.showToast({
						title: '超过退票时间',
						duration: 1500,
						icon: 'none',
					});
				}else{
					uni.request({
						url: 'https://dycts.guojutech.net/api/bill/refundByBill',
						data: {
							billId: billId
						},
						success: (e) => {
							console.log(e)
							if (e.data.code === 0) {
								uni.showToast({
									title: '退款成功请稍等',
									duration: 1500,
									icon: 'none',
								});
								this.orderList=''
								this.theAll();
							} else {
								uni.showToast({
									title: e.data.msg,
									duration: 1500,
									icon: 'none',
								});
							}
						}
					});
				}

			},
			// 查看车辆位置
			seeMore() {
				uni.navigateTo({
					url: 'map'
				})
			},
			// 乘车二维码
			toCode() {
				this.code = true
			},
			come() {
				this.code = false
			},
			// 评分
			score(index) {
				this.fenNum = index
			},
			toScore(billId, index) {
				this.fenId = billId
				if (this.fenNum) {
					this.scoreList[index].pingfen = this.fenNum
					this.scoreList[index].serviceScore = "ss"
					this.score()
				}
			},
			get(index){
				uni.request({
					url:'https://dycts.guojutech.net/api/serviceEvaluation/addEvaluationByBill',
					data:{
						openId:openid,
						billId:this.fenId,
						score:this.scoreList[index].pingfen
					},
					success: (e) => {	
						if(e.data.code===0){
							this.scoreList=''
							uni.request({
								url: 'https://dycts.guojutech.net/api/bill/getBillByServiceEvaluation',
								data: {
									openId: openid
								},
								success: (e) => {
									this.scoreList=e.data.list
								}
							});
						}
					}
				})
			},
			payOrder(scheduleDetailId){
				api.order.payOrder({scheduleDetailId,orderType:1}).then(res=>{
					if(res.code ==200){
						let data = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr:data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: (res) => {
								console.log("weixinorder");
								console.log(res);
								// 跳转订单管理
								uni.reLaunch({
									url: '../order/order'
								});
							},
							fail: (res) => {
								// 跳转订单管理
								uni.reLaunch({
									url: '../order/order'
								});
							}
						});
					}
				})
			},
			// 支付
			pay(billId,billCrateTime){				
				var time=(new Date().getTime()-new Date(billCrateTime).getTime())/1000/60
				if(time>10){
					uni.showToast({
						title: '待支付时间已超过10分钟',
						duration: 1500,
						icon: 'none',
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.background{
		background-color: #f0f0f0;
		min-height: 100vh;
	}
	
	.navBig {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #3C7AFF;

		view {
			height: 70rpx;
			color: #FFFFFF;
			font-size: 34rpx;
		}

		.active {
			border-bottom: 5rpx solid #ffffff;
		}
	}

	.navSmall {
		width: 100%;
		height: 60rpx;
		background: #C7D3F2;
		box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

		view {
			width: 49.8%;
			height: 60rpx;
			line-height: 60rpx;
			float: left;
			text-align: center;
			font-size: 22rpx;
			font-weight: bold;
			color: #161616;
		}

		.active {
			font-size: 26rpx;
			color: #3C7AFF;
		}
	}

	.orderWarp {
		width: 92%;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 4%;
		background: #ffffff;

		view {
			width: 100%;
			height: 295rpx;
			position: relative;
			border-bottom: 1rpx solid #707070;
			.fen {
				image {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
				}
			
				.xing1 {
					top: 220rpx;
					left: 5%;
				}
			
				.xing2 {
					top: 220rpx;
					left: 13%;
				}
			
				.xing3 {
					top: 220rpx;
					left: 21%;
				}
			
				.xing4 {
					top: 220rpx;
					left: 29%;
				}
			
				.xing5 {
					top: 220rpx;
					left: 37%;
				}
			
				.get {
					width: 120rpx;
					height: 39rpx;
					border: 1rpx solid #707070;
					border-radius: 27rpx;
					font-size: 23rpx;
					color: #090909;
					text-align: center;
					line-height: 39rpx;
					position: absolute;
					top: 220rpx;
					left: 45%;
				}
			
				.btnHover {
					border: none;
					background: #C7D3F2;
				}
			
			}

			.dian {
				width: 18rpx;
				height: 18rpx;
				border: 1rpx solid #707070;
				border-radius: 50%;
				position: absolute;
			}

			.dian1 {
				top: 100rpx;
				left: 5%;
			}

			.dian2 {
				top: 155rpx;
				left: 5%;
			}

			text {
				position: absolute;
				font-size: 26rpx;
				font-weight: bold;
				color: #090909;
			}

			.time {
				top: 93rpx;
				left: 10%;
			}

			.site {
				top: 148rpx;
				left: 10%;
			}

			.state {
				top: 30rpx;
				left: 85%;
				font-size: 20rpx;
			}

			.state1 {
				color: #8182F0;
			}

			.state2 {
				color: #3C7AFF;
			}

			.state3 {
				color: #AFACAC
			}

			.money {
				font-size: 34rpx;
				color: #FD9C3E;
				top: 100rpx;
				left: 78%;
			}

			.code {
				width: 85rpx;
				height: 39rpx;
				border: 1rpx solid #707070;
				border-radius: 27rpx;
				font-size: 23rpx;
				color: #090909;
				text-align: center;
				line-height: 39rpx;
				position: absolute;
				top: 220rpx;
				left: 85%;
			}

			.refund {
				top: 220rpx;
				left: 70%;
			}

			.btnHover {
				border: none;
				background: #C7D3F2;
			}
		}
		
	}

	.codeWarp {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);

		image {
			width: 500rpx;
			height: 600rpx;
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}

		button {
			width: 150rpx;
			height: 80rpx;
			position: absolute;
			top: 70%;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	}
</style>
